<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>商品图文详情</title>
				<!-- amazeui -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/ui/css/amazeui.min.css" />
		<!-- lib -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/swiper/css/swiper.min.css" />
		<!-- app -->
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/ui.css" />
		<%-- <link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/base.css"/> --%>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/header.css"/>
		<style type="text/css">
		body,h1,h2,h3,h4,h5,h6,hr,p,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
		body{
				font:14px / 1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
				-webkit-text-size-adjust:none; -webkit-user-select: none;
				background: #FFFFFF;
			}
			ul,li{margin:0;padding:0}
			ul,li{-webkit-tap-highlight-color:rgba(0,0,0,0)}
			li,ul{list-style-type:none;}
			i{font-style:normal; font-weight:normal}
			.conter{
				margin-top: 79px;
			}
			.choose{
				width: 100%;
				height: 45px;
				font-size: 0;
				position: fixed;
				top: 39px;
				background: #FFFFFF;
			}
			.choose li{
				display: inline-block;
				width: 50%;
				height: 45px;
				text-align: center;
				line-height: 50px;
			}
			.choose li span{
				font-size: 16px;
				color: #5C5C67;
			}
			.choose li .on{
				color: #BAE5F0;
				border-bottom: 2px solid #BAE5F0;
			}
			#right{
				display: none; 
			}
			.neirong{
				width: 100%;
				margin-bottom: 50px;
				margin-top: 80px;
			}
			.neirong_list{
				width: 100%;
			}
			.neirong_list img{
				width: 100%;
				margin-top: 5px;
			}
			footer{
				width: 100%;
				height: 50px;
				background: #FFFFFF;
				position: fixed;
				bottom: 0;
			}
			.shoucang,.pay{
				width: 50%;
				height: 50px;
				line-height: 50px;
				font-size: 16px;
				float: left;
				text-align: center;
				
			}
			.shoucang{
				height: 49px;
				border-top:1px solid #EDEDED ;
				color: #5C5C67;
				line-height: 50px;
				text-align: center;
			}
			.star{
				width: 20px;
				height: 20px;
				line-height: 20px;
				margin-bottom: -4px;
				margin-right:5px ;
				display: inline-block;
				background: url(${BASE_PATH}/static/app/img/btn_nor_guanzhu.png) no-repeat 0 0;
				background-size:100% ;
			}
			.onon{
				background: url(${BASE_PATH}/static/app/img/guanzhuxuanzhong.png) no-repeat 0 0;
				background-size:100% ;
			}
			.pay{
				color: #FFFFFF;
				background: #8ed1d8;
				line-height: 50px;
			}
			.jieshao_list{
				display: inline-block;
				margin-top: 10px;
				width: calc(100% - 2em);
				margin-left: 1em;;
				font-size: 16px;
				color: #5C5C67;
			}
			.logo_text{
				height: 40px;
				line-height: 40px;
				display: inline-block;
				color: #595b60;
				font-size: 14px;
				float: left;
			}
			.jieshao{
			     display: inline-block;
			    margin-top: 10px;
			    width: calc(100% - 2em);
			    margin-left: 20px;
			    font-size: 16px;
			    color: #5C5C67;
			    margin-bottom: 20px;
			}
			.pic{
				width: calc(100% - 2em);
				 margin-left: 1em;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<header>
				<div class="header">
					<span class="back" onclick="javascript:history.go(-1);"></span>
					<a href="${BASE_PATH}/index"><span class="logo_pic"></span></a>
					<span class="logo_text">OK 妈咪</span>
				</div>
				<div class="choose">
					<ul>
						<li id="1"><span class="on">宝贝介绍</span></li>
						<li id="2"><span>规格参数</span></li>
					</ul>
				</div>
			</header>
			<div class="conter">
				<div class="neirong">
					<div id="left" class="neirong_list">
						<span class="jieshao">${goods.shortInfo }</span>
						<c:if test="${fn:length(adList) > 0}">
							<c:forEach var="ad" items="${adList}" varStatus="s">
								<div class="swiper-slide pic">
									<img src="${FTP_PATH}${ad.thumb}" alt="" style="height:100%;width: 100%;"/>
								</div>
							</c:forEach>
						</c:if>
					</div>
					<div id="right" class="neirong_list">
						<c:if test="${fn:length(list) >0}">
								<c:forEach var="ad" items="${list}" varStatus="s">
									<span class="jieshao_list">${ad }</span>
								</c:forEach>
						 	
						</c:if>
					</div>
				</div>
				
			</div>
			<footer>
				<div class="shoucang">
					<c:if test="${goods.isCollected == 0}">
						<span class="star"></span>
					 </c:if>
					<c:if test="${goods.isCollected == 1}">
						<span class="star onon"></span>
					</c:if>
					收藏(<span id="collectedCount">${goods.collectedCount}</span>)
				</div>
				<div class="pay" onclick="gobuy();">立即购买</div>
			</footer>
		</div>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<!-- amazeui -->
		<script type="text/javascript" src="${BASE_PATH}/static/ui/js/amazeui.min.js"></script>
		<!-- lib -->
		<script type="text/javascript" src="${BASE_PATH}/static/lib/swiper/js/swiper.jquery.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/template/template.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-lazyload/jquery.lazyload.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/lib/jquery-marquee/jquery.marquee.min.js"></script>
		<!-- app -->
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
		<script type="text/javascript">
			$(".choose ul").on("click","li",function(){
				$(this).children("span").addClass("on");
				$(this).siblings().children("span").removeClass("on");
				var id = $(this).attr("id");
				if(id == 1){
					$("#left").show().siblings().hide();
				}else if(id == 2){
					$("#right").show().siblings().hide();
				}
			})
		var goods = {
			"id":"${goods.id}",
			"name":"${goods.name}",
			"spec":"${goods.spec}",
			"thumb":"${goods.thumb}"
			};
			$(".shoucang").click(function(){
				$(".star").toggleClass("onon");
				doCollect();
			})
		function doCollect(){
			Kit.ajax.post("${BASE_PATH}/my/doCollect",{goodsid:goods.id},function(result){
				if(result.flag==0){
					var collectedCount = parseInt($("#collectedCount").text());
					if(result.object.isCancel==1){
						$("#collectedCount").html(collectedCount-1);
					}else{
						$("#collectedCount").html(collectedCount+1);
					}
				}
			});
		}
			var storeid="${storeid}";
		 function gobuy(){
			 window.location.href="${BASE_PATH}/order/saveOrder?goods="+goods.id+"&storeid="+storeid;
		 }
		</script>
	</body>
</html>
